<template>
  <div class="add-appoint-dialog">
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" width="800px">
      <div class="title" slot="title">新增预约</div>
      <div class="add-appoint-dialog-content">
        <div class="content-title">持卡人信息</div>
        <div class="content-item">
          <div class="item">
            <span class="s1">姓名：</span>
            <span style="width: 195px"><el-input placeholder="请选择" disabled v-model="memberInfo.name"/></span>
            <span><i @click="getMembers" class="el-icon-user-solid"></i></span>
          </div>
          <div class="item">
            <span class="s1">手机号码：</span>
            <span style="width: 220px"><el-input placeholder="请选择" disabled v-model="memberInfo.phone"/></span>
          </div>
        </div>
        <div class="content-item">
          <div class="item">
            <span class="s1">套餐名称：</span>
            <span>
              <el-popover
                popper-class="buy-member-card-popover"
                placement="bottom-start"
                width="600"
                v-model="popoverVisible"
                trigger="click">
                <el-table :data="comboList">
                  <el-table-column property="name" label="名称"></el-table-column>
                  <el-table-column property="expireDate" label="有效期"></el-table-column>
                  <el-table-column property="totalNum" label="项目次数"></el-table-column>
                  <el-table-column property="amount" label="总金额"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="item">
                      <span @click="selectPlatterChange(item.row)" class="select-combo">选择</span>
                    </template>
                  </el-table-column>
                </el-table>
                <el-select slot="reference" value="" disabled/>
              </el-popover>
            </span>
          </div>
          <div class="item">
            <span class="s1">使用日期：</span>
            <span><el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="请选择" v-model="useData"/></span>
          </div>
        </div>
        <div class="content-item content-item-mar">
          <div><span class="s1">套餐价格：</span>
            <span style="text-decoration: line-through">￥3000.00</span>
            <span style="color: #FF6F35;">￥1960.00</span></div>
        </div>
        <div class="content-table">
          <el-table :data="selectedCombo.projects" :header-cell-class-name="'content-table-title'">
            <el-table-column type="index" label="序号" width="50"/>
            <el-table-column prop="name" label="项目名称"/>
            <el-table-column prop="num" label="数量"/>
            <el-table-column prop="execNum" label="执行数量"/>
            <el-table-column prop="remaining" label="剩余数量"/>
            <el-table-column label="操作">
              <template slot-scope="item">
                <div @click="appointProject(item.row)" class="operation">预约</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="btn">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button @click="dialogVisible = false" type="primary">确定</el-button>
      </div>
    </el-dialog>
    <members-dialog ref="membersDialog" @memberPages="getMembers"
                    @selectMember="getMember" :members="membersData"/>
  </div>
</template>

<script>
import MembersDialog from '@/views/member/dialog/membersDialog'
export default {
  name: 'addAppoint',
  components: { MembersDialog },
  data () {
    return {
      dialogVisible: false,
      popoverVisible: false,
      comboList: [
        {
          id: 10,
          name: '拔罐1',
          totalNum: 20,
          expireDate: '2022-10-23',
          amount: 50,
          projects: [
            { id: 10, parentId: 10, type: '理疗', name: '拔罐1', num: 10, price: 30, amount: 50 },
            { id: 11, parentId: 10, type: '理疗', name: '拔罐2', num: 10, price: 30, amount: 50 },
            { id: 12, parentId: 11, type: '理疗', name: '拔罐3', num: 10, price: 30, amount: 50 }
          ]
        },
        {
          id: 11,
          name: '拔罐2',
          totalNum: 20,
          expireDate: '2022-10-23',
          amount: 50,
          projects: [
            { id: 10, parentId: 10, type: '理疗', name: '拔罐1', num: 10, price: 30, amount: 50 },
            { id: 11, parentId: 10, type: '理疗', name: '拔罐2', num: 10, price: 30, amount: 50 }
          ]
        },
        {
          id: 12,
          name: '拔罐3',
          totalNum: 20,
          expireDate: '2022-10-23',
          amount: 50,
          projects: [
            { id: 10, parentId: 10, type: '理疗', name: '拔罐1', num: 10, price: 30, amount: 50 }
          ]
        },
        {
          id: 13,
          name: '拔罐sfsdf4',
          totalNum: 20,
          expireDate: '2022-10-23',
          amount: 50,
          projects: [
            { id: 10, parentId: 10, type: '理疗', name: '拔罐1', num: 10, price: 30, amount: 50 }
          ]
        }
      ],
      selectedCombo: {},
      selectPlatter: '',
      useData: '',
      memberInfo: {},
      membersData: { data: [], count: 16 }
    }
  },
  methods: {
    getMembers (pageTerms) {
      pageTerms = pageTerms || { pageNo: 1, pageSize: 5 }
      this.membersData.data = [
        { id: 1, name: '李1', phone: '1666666666' }, { id: 1, name: '李2', phone: '1666666666' },
        { id: 1, name: '李3', phone: '1666666666' }, { id: 1, name: '李6', phone: '1666666666' },
        { id: 1, name: '李5', phone: '1666666666' }
      ]
      this.$refs.membersDialog.show()
    },
    getMember (member) {
      this.memberInfo = member
    },
    selectPlatterChange (item) {
      this.selectedCombo = item
      this.popoverVisible = false
    },
    appointProject (project) {
      console.log(project)
    },
    show () {
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/variables";
.add-appoint-dialog {
  .title {
    border-bottom: 1px solid #e5e1e1;
    padding-bottom: 10px;
    font-size: 16px;
  }
  .add-appoint-dialog-content {
    margin-top: -30px;
    .content-title {
      margin-top: 15px;
      color: rgba(0, 0, 0, 0.75);
    }
    .content-item {
      display: flex;
      align-items: center;
      margin: 10px 40px;
      .item{
        width: 50%;
        display: flex;
        align-items: center;
      }
      .el-icon-user-solid {
        cursor: pointer;
        margin-left: 10px;
        font-size: 20px;
        color: $mainBg;
      }
      .s1 {
        color: rgba(0, 0, 0, 0.55);
        width: 100px;
        display: inline-block;
        text-align: right;
      }
      .s2 {
        margin-left: 20px;
      }
      .select-option-title {
        color: rgba(44, 42, 42, 0.6);
      }
      .select-option-title,
      .select-option {
        display: flex;
        justify-content: space-between;
        padding: 10px 30px;
        .select-combo{
          color: $mainBg;
        }
      }
    }
    .content-item-mar{
      margin: 25px 40px;
    }
    .content-table{
      box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.04);
      width: 83%;
      margin: 0 auto;
      .operation{
        color: $mainBg;
        cursor: pointer;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
